import APIS from '@/apis';
import {PageContainerProps} from '@ant-design/pro-layout/lib/PageContainer';
import {Button, Col, List, Row} from 'antd';
import React from 'react';
import {Component} from 'react';
import {connect} from 'umi';
import MdDocShow from "@/components/MdDocShow";
import {newGuid} from "@/utils/utils";
import "../index.css"

class PaperDetailes extends Component<any, any> {
  constructor(props: PageContainerProps) {
    super(props);
  }

  state = {
    data: this.props.location.state,
    courseData: {courseName: '',},
    teacherData: {name: ''},
    detail: {zones: [{id: 0}]},
    zone1Questions: [],
    zone2Questions: [],
    zone3Questions: [],
    zone4Questions: [],
    // zoneQuestions:{
    //   "zone1":[],
    //   "zone2":[],
    //   "zone3":[],
    //   "zone4":[],
    // }
  }

  componentDidMount() {
    APIS.CourseAPI.GetCourseDetail({id: this.state.data.courseId}).then(res => {
      this.setState({courseData: res})
    })
    APIS.OrgsAPI.GetTeacherDetail({id: this.state.data.teacher}).then(res => this.setState({teacherData: res}))

    setTimeout(() => {
      this.getExamDetail(this.state.data)
    }, 100);
  }

  getExamDetail(data: any) {
    APIS.ExamAPI.GetExamDetail(data).then(detail => {
      this.setState({detail})
      // detail.zones.forEach((item:any,index:any)=>{
      //   APIS.ExamAPI.GetPaperQuestionList(item).then(res => {this.setState({ zone1Questions: res })})
      // })
      // console.log(data.id);
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[0]).then(res => this.setState({zone1Questions: res}))
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[1]).then(res => this.setState({zone2Questions: res}))
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[2]).then(res => this.setState({zone3Questions: res}))
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[3]).then(res => this.setState({zone4Questions: res}))
    })
  }

  render() {
    return (
      <div>
        <Row style={{backgroundColor: "#ddd", paddingTop: '20px', paddingBottom: '20px'}} justify='center'
             gutter={[16, 16]}>
          <Col span={10}>试卷标题：{this.state.data.title}</Col>
          <Col span={10}>所属课程：{this.state.courseData?.courseName}</Col>
          <Col span={10}>课程教师：{this.state.teacherData?.name}</Col>
          <Col span={10}>课程简介：{this.state.data.description}</Col>
        </Row>
        <div style={{fontSize: '20px'}}>一、选择题</div>
        <List>
          {this.state.zone1Questions.map?.((v: any, i) => (
            <List.Item key={i}>
              <div style={{display: "flex"}}>
                <span>{i + 1 + '. '}</span>
                <MdDocShow id={`question-select-${v.id}`} value={v.content}/>
              </div>
              {v.selections?.map((v: any, i: number) => (
                <div key={i} style={{display: "flex"}}><span> {String.fromCharCode(65 + i) + '. '}</span><MdDocShow
                  id={newGuid()}
                  style={{width: "98%"}}
                  value={v}/></div>
              ))}
              <div>答案：{v.answer.split(',')?.map((v: any, i: number) => (
                <div key={i} style={{display: 'inline-block'}}>
                  {String.fromCharCode(65 + parseInt(v))}
                </div>
              ))}</div>
              <div>解析：{v.analyzing}</div>
            </List.Item>
          ))}
        </List>
        <div style={{fontSize: '20px'}}>二、判断题</div>
        <List>
          {this.state.zone2Questions.map?.((v: any, i) => (
            <List.Item key={i}>
              <div style={{display: "flex"}}>
                <span>{i + 1 + '. '}</span>
                <MdDocShow id={`question-judement-${v.id}`} value={v.content}/>
              </div>
              <div>答案：{v.answer === '1' ? '正确' : '错误'}</div>
              <div>解析：{v.analyzing}</div>
            </List.Item>
          ))}
        </List>
        <div style={{fontSize: '20px'}}>三、填空题</div>
        <List>
          {this.state.zone3Questions.map?.((v: any, i) => (
            <List.Item key={i}>
              <div style={{display: "flex"}}>
                <span>{i + 1 + '. '}</span>
                <MdDocShow id={`question-fill-${v.id}`} value={v.content}/>
              </div>
              <div>答案：{v.answer}</div>
              <div>解析：{v.analyzing}</div>
            </List.Item>
          ))}
        </List>
        <div style={{fontSize: '20px'}}>四、简答题</div>
        <List>
          {this.state.zone4Questions.map?.((v: any, i) => (
            <List.Item key={i}>
              <div style={{display: "flex"}}>
                <span>{i + 1 + '. '}</span>
                <MdDocShow id={`question-answer-${v.id}`} value={v.content}/>
              </div>
              <div>答案：{v.answer}</div>
              <div>解析：{v.analyzing}</div>
            </List.Item>
          ))}
        </List>
        <Button style={{float: 'right'}} type='primary' onClick={() => this.props.history.goBack()}>确定</Button>
      </div>
    );
  }
}

export default connect()(PaperDetailes);
